<template>
 <div class="box-serach">
       <el-dialog title="第三方接入配置" 
               :visible.sync="dialogVisibles" class="box-edit box-dialog" :before-close="handleClose">
        <div>
        <el-form ref="form" :model="dynamicValidateForm" label-width="80px" >
         <el-row :gutter="24">
            <el-col :span="20">
              <span>配置一</span>
                <el-form-item label="特殊资源" label-width="100px" prop="resource" class="box-item">
                  <el-radio-group v-model="dynamicValidateForm.resource">
                    <el-radio label="开启"></el-radio>
                    <el-radio label="关闭"></el-radio>
                  </el-radio-group>
                </el-form-item>
              <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
                <el-form-item
                  prop="email"
                  label="bucket"
                  :rules="[
                    { required: true, message: '请输入正确的选项', trigger: 'blur' },
                    { type: 'email', message: '请输入正确的选项', trigger: ['blur', 'change'] }
                  ]"
                >
                  <el-input v-model="dynamicValidateForm.email"></el-input>
                  <el-button @click="addDomain" class="box-Button">增加</el-button>
                </el-form-item>

                <el-form-item
                  v-for="(domain, index) in dynamicValidateForm.domains"
                  :label="'bucket' + index"
                  :key="domain.key"
                  :prop="'domains.' + index + '.value'"
                  :rules="{
                    required: true, message: 'bucket不能为空', trigger: 'blur'
                  }"
                >
                  <el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)" style="margin-left:12px">删除</el-button>
                  <el-button @click.prevent="removeDomain(domain)" style="margin-left:12px">编辑</el-button>
                </el-form-item>
                <el-form-item>
                  <div class="elformButton">
                    <el-button type="primary" @click="submitForm('dynamicValidateForm')">提交</el-button>
                    <el-button @click="resetForm('dynamicValidateForm')">重置</el-button>
                  </div>
                </el-form-item>
            </el-form>
            </el-col>
         </el-row>
        </el-form>
        </div>
    </el-dialog>
 </div>
</template>
<script>
export default {
  data(){
    return{
      dialogVisibles:this.addVisible,
      dynamicValidateForm: {
          domains: [{
            value: ''
          }],
          email: '',
          resource:""
        }
    }
  },
  props:{
      addVisible:{
        type:Boolean,
        default:false
      }
    },
  watch: {
    addVisible(){
     this.dialogVisibles=this.addVisible;
     console.log(this.dialogVisibles)

    }
  },
  created(){
    console.log(this.addVisible);
  },
  methods:{
          submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      removeDomain(item) {
        var index = this.dynamicValidateForm.domains.indexOf(item)
        if (index !== -1) {
          this.dynamicValidateForm.domains.splice(index, 1)
        }
      },
      addDomain() {
        this.dynamicValidateForm.domains.push({
          value: '',
          key: Date.now()
        });
      },
        handleClose(){
            // 子组件调用父组件方法，并传递参数
            this.$emit('Addshow','false');
        }
    }
  }
</script>

<style lang="scss" scoped>
::v-deep.el-form-item .el-form-item__content{
  display:flex !important;
  .elformButton{

  }
  .box-Button{
    margin-left:12px;
  }
  .box-item{
    display: flex;
    align-items: center;
   
  }

}
 ::v-deep.box-item .el-form-item__content{
      margin-top:11px !important;
    }
.box-serach{
  position: relative;
  ::v-deep.el-dialog__wrapper .el-dialog{
    width:calc(100% - 200px);
    height:100%;
    margin-top:0 !important;
    position:absolute;
    left:200px;
  }
}
</style>